<!--
 * @Description: 封装基础按钮选项 弹出框，省去在每个页面要重新写弹出框, picker使用参考文档：https://vant-contrib.gitee.io/vant/#/zh-CN/picker
 * @Author BPF
 * @create 2021/12/4 21:13
 -->
<!--default-->
<script>
export default { name: 'popup-picker' }
</script>

<!--setup-->
<script setup>
import { computed, onMounted, onUnmounted, reactive, useSlots, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
let _referenceDOM = null
const props = defineProps({
  columns: {
    type: Array,
    default: () => [
      {
        label: '江苏',
        children: [{ label: '连云港' }]
      }
    ]
  },
  pickerAttrs: {
    type: Object,
    default: () => ({})
  },
  props: {
    type: Object,
    default: () => ({
      label: 'label',
      value: 'value',
      children: 'children'
    })
  }
})
const emit = defineEmits(['confirm'])
defineExpose({ getPickerInstance }) // @expose

const slots = useSlots()
const state = reactive({
  visible: false
})

const propsMapsCp = computed(() => ({
  label: 'label',
  value: 'value',
  children: 'children',
  ...props.props
}))

const columnsCp = computed(() => {
  const { columns } = props
  return transferColumns(JSON.parse(JSON.stringify(columns)))
})

onMounted(() => {
  console.log('slot', slots, slots.reference()?.[0], slots.reference()?.[0]?.ref?.i?.proxy)
  if (slots.reference) {
    _referenceDOM = slots.reference()?.[0]?.el || slots.reference()?.[0]?.ref?.i?.proxy?.$refs.reference
  }
  _referenceDOM && _referenceDOM.addEventListener('click', onChangeVisible, false)
  console.log('_referenceDOM', _referenceDOM)
})

onUnmounted(() => {
  _referenceDOM && _referenceDOM.removeEventListener('click', onChangeVisible, false)
})

function onConfirm() {
  state.visible = false
  emit('confirm', proxy.$refs.picker.getValues(), proxy.$refs.picker.getIndexes())
}

function onCancel() {
  state.visible = false
  emit('cancel', proxy.$refs.picker.getValues(), proxy.$refs.picker.getIndexes())
}

function onChangeVisible() {
  state.visible = true
}

// @expose
function getPickerInstance() {
  return proxy.$refs.picker
}

/**
 * 递归转化数据结构
 * @param columns
 * @returns {*[]}
 */
function transferColumns(columns = []) {
  const labelField = propsMapsCp.value.label
  columns.forEach(v => {
    v.text = v[labelField] || v.text
    if (Array.isArray(v.children)) {
      transferColumns(v.children)
    }
  })
  return columns
}
</script>

<!--render-->
<template>
  <div>
    <slot name="reference">reference</slot>
    <van-popup v-model:show="state.visible" position="bottom" :lazy-render="false" get-container="body">
      <div class="popup-body">
        <div class="top-header">
          <div @click="onCancel">取消</div>
          <div @click="onConfirm">确定</div>
        </div>
        <slot></slot>
        <van-picker
          ref="picker"
          :show-toolbar="false"
          :columns="columnsCp"
          :visible-item-count="7"
          v-bind="pickerAttrs"
        />
      </div>
    </van-popup>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.top-header {
  display: flex;
  height: 0.88rem;
  align-items: center;
  justify-content: space-between;
  & > div {
    color: #595959;
    font-size: 0.32rem;
    padding: 0 0.32rem;
  }
  & > div:nth-child(2) {
    color: @primary-color;
  }
}
</style>
